<template>
  <transition name="translate">
    <div class="record-wrap">
      <common-back :content="headerTitle"
                   class="header"></common-back>
      <common-loading v-show="showLoading"></common-loading>
      <ul class="record-list"
          v-show="!showLoading">
        <li class="record-item"
            v-for="item of recordList"
            :key="item.id">
          <div class="record-item-title"
               border-bottom-1px>
            <div class="order-num">借款编号 <span>{{item.order_no}}</span> </div>
            <div class="audit-status">{{item.status}}</div>
          </div>
          <div class="money-type">
            <div class="money-num">借款金额<span>￥{{item.amount}}</span> </div>
            <div class="money-time">借款时间<span>{{item.createtime}}</span></div>
            <div class="money-use">借款用途<span>{{item.purpose}}</span></div>
          </div>
        </li>
      </ul>
    </div>
  </transition>
</template>
<script>
import CommonBack from 'common/headerBack/back'
import CommonLoading from 'common/loading/loading'
import { mapState } from 'vuex'
export default {
  name: 'record',
  components: {
    CommonBack,
    CommonLoading
  },
  data () {
    return {
      headerTitle: '借贷记录',
      recordList: [],
      showLoading: true
    }
  },
  created () {
    this.getState()
  },
  computed: {
    ...mapState(['person', 'contact', 'bank']),
    showUser () {
      return Object.keys(this.userInfo).length
    }
  },
  methods: {
    getState () {
      if (Number(this.person) === 1 && Number(this.contact) === 1 && Number(this.bank) === 1) {
        this.getRecord()
      } else {
        this.$router.push({
          path: '/borrow'
        })
      }
    },
    getRecord () {
      this.$api.person.record()
        .then(this.getRecordSucc)
        .catch((e) => {
          this.$toast('网络异常请稍后再试')
        })
    },
    getRecordSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        this.showLoading = false
        const data = res.data
        this.recordList = data.record
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.record-wrap
  position absolute
  top 0
  left 0
  bottom 0
  right 0
  background-color $common_bgc_gray
  z-index 30
  overflow-y scroll
  padding()
  padding-top 108px
  padding-bottom 134px

  .record-list
    width 100%

    .record-item
      background $common_bgc
      box-shadow 0px 6px 12px 0px rgba(47, 53, 66, 0.16)
      border-radius 24px
      margin-bottom 20px

      .record-item-title
        height 110px
        display flex
        justify-content space-between
        align-items center
        font-size $shop_name
        font-weight 400
        color $id_input
        padding-left 32px
        padding-right 32px
        box-sizing border-box

        .order-num
          span
            margin-left 10px

        .audit-status
          color #FF4757

      .money-type
        padding-left 32px
        padding-right 32px
        padding-top 20px
        padding-bottom 23px
        box-sizing border-box
        font-size $address
        line-height 68px
        font-weight 400
        color #747D8C

        span
          margin-left 50px
          color $id_input

.translate-enter-active, .translate-leave-active
  transition all 0.3s

.translate-enter, .translate-leave-active
  transform translate3d(100%, 0, 0)
</style>
